<template>
    <div class="allactivity">
        <!-- 个人中心查看我报名的活动 -->
            <span style="float:left">
                <router-link to="/myself">
                    <b>
                        <i style="margin:0.2rem" class="iconfont icon-xiangzuojiantou"></i>
                    </b>
                </router-link>
            </span>
            <h3 style="text-align: center;">
                    <b>
                        我的活动
                    </b>
                    <!-- <select id="method" style="float:right">
                        <option value="报名的活动">报名的活动</option>
                        <option value="发布的活动">发布的活动</option>
                    </select> --> 
            </h3>
        <div v-for="(oneactivity,index) in actvityone" :key="index">
            <!-- 最大的框里面是一个图片 -->
            <h3>
                {{oneactivity.name}}
                <button class="activitycontain">
                    <router-link  to="/activityone/1" style="color:white">
                        活动详情
                    </router-link>
                </button>
            </h3>
            <p>简介:{{oneactivity.particulars}}</p>
            <p>报名中</p>
            <p>已报人数{{oneactivity.particulars}}</p>
            <!-- <p>报名时间21.2.8-21.5.8</p>
            <p>活动时间21.2.8-21.5.8</p> -->
            <!-- 根据上方的select进行判断哪个p进行隐藏跟显示 -->
            <p  class="person">
                <!-- <button @click="gobtn()" style="float:right">取消报名</button> -->
                <button @click="changeactivitycontain(index)" style="float:right;">修改报名信息</button>
            </p>
            <!-- <p class="user">
                <button  style="float:right">删除活动</button>
                <button  style="float:right;margin-right: 5%;">修改活动信息</button>
            </p> -->

<p id="activityid"></p>

            <van-popup id="activitychangediv" v-model="changeactivity" position="bottom" :style="{ height: '50%' }">
                <div>
                    
                    <!--活动帖子的id-->
                    <!-- 年龄 -->
                    <p>
                        <select id="age">
                            <option>19</option>
                            <option>20</option>
                            <option>21</option>
                        </select>
                    </p>
                    <!-- 学校 -->
                    <p>
                        <select id="school">
                            <option>河南科技学院</option>
                            <option>河南师范大学</option>
                            <option>河南理工大学</option>
                        </select>
                    </p>
                    <!-- 性别 -->
                    <p>
                        <select id="sex">
                            <option>请选择</option>
                            <option>男</option>
                            <option>女</option>
                        </select>
                    </p>
                    <p>
                        <input id="telephone" placeholder="请输入手机号">
                    </p>
                    <p>
                        <input id="name" placeholder="请输入姓名">
                    </p>
                    <p>
                        <button @click="yeschangeactivity(index)">确认</button>
                        <button style="margin-right: 0.5rem;" @click="hidePopup()">取消</button>
                    </p>
                </div>
            </van-popup>

            
        </div>


    </div>
</template>

<script>
import axios from 'axios'

export default {
    name:'Activity',
    components:{
        
    },
    data() {
        return {
            changeactivity:false,
            actvityone:null,
        }
    },
    mounted() {
        // document.getElementById('method').onchange=function(){
        //     console.log(this.value)
        //     //获取到信息,进行判断
        //     if(this.value=="发布的活动"){
                //遍历用户自己发布的活动
            //         axios({
            //             url:'/getUserActivities',
            //             method:'get',
            //             headers:{
            //                 'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
            //             }
            //         }).then(data => {
            //             console.log(data)
            //             var personlis  = document.getElementsByClassName("person")
            //             for (var i = 0;i<personlis.length;i++) {
            //                 personlis[i].style.display="none"
            //             }
            //             var userlis  = document.getElementsByClassName("user")
            //             for (var i = 0;i<userlis.length;i++) {
            //                 userlis[i].style.display="block"
            //             }
            //         }).catch(err => {
            //             console.log(err)
            //         })
            // }else{
                    //遍历我的活动列表
                    axios({
                        url:'/usersSignUp/querySignUp',
                        method:'get',
                        headers:{
                            'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                        }
                    }).then(data => {
                        console.log(data)
                        var userlis  = document.getElementsByClassName("user")
                        for (var i = 0;i<userlis.length;i++) {
                            userlis[i].style.display="none"
                        }
                        var personlis  = document.getElementsByClassName("person")
                        for (var i = 0;i<personlis.length;i++) {
                            personlis[i].style.display="block"
                        }
                           this.actvityone=data.data.data
                            console.log(this.actvityone)
                    }).catch(err => {
                        console.log(err)
                    })
                //遍历用户参与的活动
            // }
        // },


            //         //遍历我的活动列表
            //         axios({
            //             url:'/usersSignUp/querySignUp',
            //             method:'get',
            //             headers:{
            //                 'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
            //             }
            //         }).then(data => {
            //             console.log(data)
            //             var userlis  = document.getElementsByClassName("user")
            //             for (var i = 0;i<userlis.length;i++) {
            //                 userlis[i].style.display="none"
            //             }
            //             console.log(userlis[0])
            //             var personlis  = document.getElementsByClassName("person")
            //             for (var i = 0;i<personlis.length;i++) {
            //                 personlis[i].style.display="block"
            //             }
            //             this.actvityone=data.data.data
            //             console.log(this.actvityone)

            //         }).catch(err => {
            //             console.log(err)
            //         })
            // // //首先根据select来判断是用户自己发布的还是参与的  来这里
            // // var method = document.getElementById("method")
            // // console.log(method)
            // // var index = method.selectedIndex; // 选中索引
            // // var value = method.options[index].value; // 选中值
            // // console.log(value)


    },
    methods:{


        
        
        

        //隐藏修改框
        hidePopup(){
            this.changeactivity=false
        },
        //点击显示修改报名信息的弹出框
        changeactivitycontain(index){
            console.log(index)
            this.changeactivity=true
        },
        //点击确认进行调取修改报名信息的接口  来这里
        yeschangeactivity(){
            //调用接口
            axios({
                url:'/modifySignUpActivity',
                method:'post',
                params:{
                    activityId:activityId,
                    age:age,
                    name:namee,
                    school:school,
                    sex:sex,
                    telephone:telephone,
                },
                headers:{
                    'Authentication-Token':JSON.parse(sessionStorage.getItem("token")),
                }
            }).then(data => {
                console.log(data)
                console.log("成功修改报名信息")
            }).catch(err => {
                console.log(err)
            })
            

        },
        // gobtn(){

        //     //取消报名
        //     //调用取消报名的接口 来这里
        // }
    }
}
    
</script>

<style lang="less" scoped>
    .allactivity{
        width: 100%;
        height: 100%;
        .activitycontain{
            float: right;
            border: none;
            background-color: burlywood;
            color: white;
            padding: 0.1rem;
            margin: auto;
        }
        div{
            margin-top:10% ;
            width: 100%;
            p{
                margin-left:2% ;
                margin: 0.2rem 0.2rem;
                button{
                        float: right;
                        background-color: white;
                        border: none;
                        color: cornflowerblue;
                        font-size: 0.2rem;
                }
            }

        }
    }
    #activitychangediv{
        p{
            padding: 0;
            margin: auto;
            margin-top: 0.5rem;
            select{
                border: 1px solid rgb(245 245 247) ;
                width:100% ;
                height: 15%;
                background-color: white;
            }
            input{
                text-indent: 10px;
                border: 1px solid rgb(245 245 247) ;
                width:100% ;
                height: 10%;
            }
        }
    }
</style>